<!DOCTYPE HTML>
<html>
    <head>
        <title>ms-href</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../avalon.js" ></script>
        <script>

            avalon.define("test", function(vm) {
                vm.url = {
                    hostname: "aaa",
                    pathname: "bbbb"
                }
                vm.menu = {
                    $id: "hash"
                }
            });

        </script>
        <style>
            .menu{
                padding-left: 20px;
                border-bottom:1px solid greenyellow;/*底线*/
            }
            .menu a{
                display: inline-block;/*让内联元素变成一个矩形，可以添加边框什么的*/
                *display:inline;
                *zoom:1;
                width:200px;
                height:30px;
                line-height: 30px;/*垂直居中*/
                text-align: center;/*文本居中*/
                text-decoration: none;/*去掉默认底边*/
            }
            .menu a:hover{
                display: inline-block;
                position: relative;
                z-index: 10;
                width:200px;
                height:31px;
                top: 1px;
                background: #fff;
                line-height: 31px;
                text-align: center;
                border-top: 1px  solid  greenyellow;
                border-left: 1px  solid  greenyellow;
                border-right: 1px  solid  greenyellow;
                border-bottom: 1px  solid  #fff;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <fieldset ms-controller="test">
            <legend>例子</legend>
            <p><a ms-href="{{url.hostname}}/{{url.pathname}}.html">link1</a></p>
            <p><a ms-href="#{{menu.$id}}">link2</a></p>
            <p><a ms-href="{{menu.$id}}">link3</a></p>
        </fieldset>
        <br/>
        <br/>
        <div class="menu">
            <a href="#">aaaa</a><a href="#">aaaa</a><a href="#">aaaa</a>
        </div>


    </body>
</html>